*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
body{
	background: #f6f3ed;
	background-size: cover;
	color: #e7e7e8;
}
.progress{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: #e7e7e8; 
}
.progress .percent{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #c98518;
    font-size: 1.5rem;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
}
.container{
	position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 640px;
    margin-left: -320px;
    overflow: hidden;
}
.pages,
.page{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
.page{
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.pages.active{
  z-index: 101;
}
.swiper-container{
	width: 100%;
	height: 100%;
}
.txt{
	position: absolute;
	left: 50%;
	top: 50%;
}

.boot{
  z-index: 100;
}
.boot .b1,
.boot .b2,
.boot .b3{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center;
  background-size: cover;
}
.boot .txt{
  position: absolute;
  margin-left: -25px;
  margin-top: -265px;
  width: 50px;
  height: 278px;
  background: url(../img/intro-txt.png) no-repeat;
}
.boot .b1{
  background-image: url(../img/intro-bg1.jpg);
}
.boot .b2{
  background-image: url(../img/intro-bg2.jpg);
}
.boot .b3{
  background-image: url(../img/intro-bg3.jpg);
}
.boot .b1 .txt{
  background-position: 0 0;
}
.boot .b2 .txt{
  background-position: -52px 0;
}
.boot .b3 .txt{
  background-position: -104px 0;
}
.p1{background-image: url(../img/bg1.jpg);}
.p2{background-image: url(../img/bg2.jpg);  background-position: top center;}
.p3{background-image: url(../img/bg3.jpg); background-position: top center;}
.p4-1{background-image: url(../img/bg4-1.jpg);}
.p4-2{background-image: url(../img/bg4-2.jpg);}
.p4-3{background-image: url(../img/bg4-3.jpg);}
.p4-4{background-image: url(../img/bg4-4.jpg);}
.p5{background-image: url(../img/bg5.jpg);}
.p6{background-image: url(../img/bg-pro1.jpg);}
.p7{background-image: url(../img/bg-pro1.jpg);}
.p8{background-image: url(../img/bg8.jpg);  background-position: top center;}
.p9-1{background-image: url(../img/bg9-1.jpg);}
.p9-2{background-image: url(../img/bg9-2.jpg);}
.p9-3{background-image: url(../img/bg9-3.jpg);}
.p9-4{background-image: url(../img/bg9-4.jpg);}
.p10{background-image: url(../img/bg10.jpg);}
.p11{background-image: url(../img/bg-pro2.jpg);}
.p12{background-image: url(../img/bg-pro2.jpg);}
.p13{background-image: url(../img/bg13.jpg); background-position: top center;}
.p14{background-image: url(../img/bg14.jpg);}
.p15{background-image: url(../img/bg-pro1.jpg);}
.p16{background-image: url(../img/bg-pro1.jpg);}
.p17{background-image: url(../img/bg17.jpg); background-position: top center;}
.p18-1{background-image: url(../img/bg18-1.jpg);}
.p18-2{background-image: url(../img/bg18-2.jpg);}
.p18-3{background-image: url(../img/bg18-3.jpg);}
.p18-4{background-image: url(../img/bg18-4.jpg);}
.p19{background-image: url(../img/bg19.jpg); background-position: bottom center;}

.p1 .txt{
	margin-left: -82px;
	margin-top: -390px;
	width: 164px;
	height: 396px;
	background: url(../img/txt1.png) no-repeat;
}
.p2 .txt{
	top: 10%;
	margin-left: -280px;
	width: 373px;
	height: 209px;
	background: url(../img/txt2.png) no-repeat;
}
.p19 .txt{
  position: relative;
  top: auto;
  left: auto;
  margin: auto;
  margin-top: 11%;
  width: 477px;
  height: 100px;
  background: url(../img/txt19.png) no-repeat;
}
.p4-1 .txt,
.p9-1 .txt,
.p18-1 .txt{
  top: 1%;
  background: url(../img/cases-title.png) no-repeat;
}
.p4-1 .txt a,
.p9-1 .txt a{
  display: block;
  width: 100%;
  height: 100%;
}
.p4-1 .txt{
  margin-left: -267px;
  width: 535px; 
  height: 218px; 
  background-position: 0 -486px;
}
.p9-1 .txt{
  margin-left: -278px;
  width: 556px; 
  height: 227px;
  background-position: 0 -257px;
}
.p18-1 .txt{
  margin-left: -273px;
  width: 547px; 
  height: 255px; 
  background-position: 0 0;
}
.pro-info{
  margin-top: 8%;
  text-align: center;
}
.pro-info > div{
  margin: auto;
}
.pro-info .tit{
  background: url(../img/pro-title.png) no-repeat;
}
.pro-info .text{
  margin-top: 30px;
  background: url(../img/pro-txt.png) no-repeat;
}
.pro-info .more{
  display: block;
  margin: auto;
  margin-top: 35px;
  width: 188px;
  height: 49px;
  color: #5a2a12;
  border: 1px solid #5a2a12;
  font-size: 24px;
  text-align: center;
  border-radius: 8px;
  line-height: 49px;
  text-decoration: none;
}
.desk{
  position: absolute;
  bottom: 0;
  width: 640px;
  height: 279px;
  background: url(../img/desk.png) no-repeat;
}
.fish{
  position: absolute;
  left: 50%;
  bottom: 15%;
  margin-left: -223px;
  width: 446px;
  height: 493px;
  background: url(../img/fish.png) no-repeat;
}
.bottol{
  position: absolute;
  left: 50%;
  bottom: 16%;
  margin-left: -166px;
  width: 332px;
  height: 467px;
  background: url(../img/bottol.png) no-repeat;
}
.sofa{
  position: absolute;
  left: 50%;
  bottom: 12%;
  margin-left: -220px;
  width: 441px;
  height: 445px;
  background: url(../img/sofa.png) no-repeat;
}
.table{
  position: absolute;
  left: 50%;
  margin-left: -190px;
  bottom: 10%;
  width: 380px;
  height: 546px;
  background: url(../img/table.png) no-repeat;
}
.rabbit{
  position: absolute;
  left: 50%;
  bottom: 16%;
  margin-left: -170px;
  width: 341px;
  height: 490px;
  background: url(../img/rabbit.png) no-repeat;
}
.bear{
  position: absolute;
  left: 50%;
  bottom: 16%;
  margin-left: -266px;
  width: 533px;
  height: 451px;
  background: url(../img/bear.png) no-repeat;
}
.fish,.bottol,.sofa,.table,.rabbit,.bear{
  zoom: 0.8;
}
.pro-fish .tit{
  width: 168px; 
  height: 88px; 
  background-position: -170px 0;
}
.pro-fish .text{
  width: 377px; 
  height: 133px; 
  background-position: -1333px 0;
}
.pro-bottol .tit{
  width: 168px; 
  height: 88px; 
  background-position: -340px 0;
}
.pro-bottol .text{
  width: 437px; 
  height: 167px; 
  background-position: 0 0;
}
.pro-sofa .tit{
  width: 168px; 
  height: 88px; 
  background-position: 0 0;
}
.pro-sofa .text{
  width: 405px; 
  height: 162px; 
  background-position: -439px 0;
}
.pro-table .tit{
  width: 168px; 
  height: 88px; 
  background-position: 0 0;
}
.pro-table .text{
  width: 485px;
  height: 162px;
  background-position: -846px 0;
}
.pro-rabbit .tit{
  width: 226px; 
  height: 73px; 
  background-position: -510px 0;
}
.pro-rabbit .text{
  width: 290px; 
  height: 128px; 
  background-position: -1712px 0;
}
.pro-bear .tit{
  width: 226px; 
  height: 73px; 
  background-position: -510px 0;
}
.pro-bear .text{
  width: 351px; 
  height: 128px; 
  background-position: -2004px 0;
}

.p5 h3,
.p10 h3,
.p14 h3{
  font-size: 38px;
  color: #5a2a13;
  line-height: 75px;
  text-align: center;
  font-weight: normal;
  margin-top: 15%;
}
.p5 .ele,
.p10 .ele,
.p14 .ele{
  position: absolute;
  left: 50%;
  bottom: 50%;
}
.p5 .ele{
  margin-left: -129px;
  margin-bottom: -183px;
  width: 258px;
  height: 366px;
  background: url(../img/e1.png) no-repeat;
}
.p10 .ele{
  margin-left: -124px;
  margin-bottom: -184px;
  width: 248px;
  height: 368px;
  background: url(../img/e2.png) no-repeat;
}
.p14 .ele{
  margin-left: -86px;
  margin-bottom: -181px;
  width: 173px;
  height: 363px;
  background: url(../img/e3.png) no-repeat;
}
.p5 .logo,
.p10 .logo,
.p14 .logo{
  position: absolute;
  bottom: 15%;
  left: 50%;
  margin-left: -82px;
  width: 164px;
  height: 42px;
  background: url(../img/logo.png) no-repeat;
}
.p19 .qrcode{
  margin-top: 30px;
  text-align: center;
}
.p19 .qrcode img{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 3px #ccc;
}
.p19 .qrcode p{
  margin-top: 15px;
  font-size: 22px;
  color: #000;
}
.p19 .icolor{
  line-height: 36px;
  margin-top: 50px;
  text-align: center;
  color: #707070;
}
.p19 .icolor h3{
  font-weight: normal;
  font-size: 24px;
  text-spacing: 3px;
}
.p19 .icolor p{
  font-size: 18px;
}
.next{
	position: absolute;
  z-index: 998;
	width: 42px;
	height: 23px;
	left: 50%;
	bottom: 5%;
	margin-left: -21px;
	background: url(../img/next.png) no-repeat;
	animation: start 1s infinite;
	-webkit-animation:  start 1s infinite;
}
.swiper-slide-active .b1 .txt{
	animation: fadeIn 1s both;
	-webkit-animation: fadeIn 1s both;
}
/*animation*/
@keyframes start {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(0,15px,0); }
}
@-webkit-keyframes start {
    from { opacity: 1; -webkit-transform: translate3d(0,0,0); }
    to { opacity: 0; -webkit-transform: translate3d(0,15px,0); }
}
@keyframes pulse {
  0% { transform: scale(0); opacity: 0.0; }
  25% { transform: scale(0); opacity: 0.1; }
  50% { transform: scale(0.1); opacity: 0.5; }
  75% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.0; }
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(0); opacity: 0.0; }
  25% { -webkit-transform: scale(0); opacity: 0.1; }
  50% { -webkit-transform: scale(0.1); opacity: 0.5; }
  75% { -webkit-transform: scale(0.5); opacity: 1; }
  100% { -webkit-transform: scale(1); opacity: 0.0; }
}